<template>
  <div id="aa" class="home">
    <vBanner :date='banner'></vBanner>
    <div class="topNav">
      <ul>
        <li v-for="(item,index) in topNav"><em><img :src="item.src"></em>
          <p>{{item.title}}</p>
        </li>
      </ul>
    </div>
    <div class="nList" id="myData">
      <ul v-if="loadStart">
        <router-link v-for="(list,index) in prcList" :key="list.id" tag="li" :to="{path:'/show',query: {id:list.id}}">
          <p class="prc"><img :src="list.goods_logo" :onerror="imgError"></p>
          <p class="title">{{list.goods_name}}</p>
          <p class="price">${{list.goods_prices}}.00<span>进入</span></p>
        </router-link>
      </ul>
      <p class="loading" v-if="!loadStart"><span></span></p>
      <div v-if="!loadShow">
        <p class="clickLoad" v-if="!noMore" @click='loadMore'>点击加载更多</p>
        <p class="noThing" v-if="noMore">---我们是有底线的---</p>
      </div>
      <p class="loading" v-if="loadShow"><span></span></p>
    </div>

  </div>
</template>
<script>
import vBanner from './components/banner.vue'
import {Get,Post,Put,Del} from '@/config/api.js'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: 'hello',
  data() {
    return {
      banner: [{
        url: 'javascript:',
        img: '../static/images/banner01.jpg'
      }, {
        url: 'javascript:',
        img: '../static/images/banner02.jpg'
      }, {
        url: 'javascript:',
        img: '../static/images/banner03.jpg'
      }],
      topNav: [{ title: '质量保障', src: '../static/images/item01.png' }, { title: '送货上门', src: '../static/images/item02.png' }, { title: '品牌商', src: '../static/images/item03.png' }],
      swiperItemIndex: 1,
      loadStart: false,
      prcList: [], //商品数据
      prcLoad: true, //判断是否在加载中
      nowNum:1,//当前页码
      prcNum: 10, //加载数量
      allNum: '', //总页数
      loadShow: false, //加载中
      noMore: false //没有更新商品
    }
  },
  components: {
    vBanner
  },
  computed: mapState({
    imgError: 'imgError'
  }),
  mounted() {
    this.getData()
  },
  methods: {
    //获取商品
    async getData() {
      let that = this
      let reg=await Get('/goods?page=1&_per_page=10',this.$store.state.token)
      this.prcList = reg.data
      this.allNum = reg.meta.pagination.total_pages
      this.nowNum = reg.meta.pagination.current_page
      this.loadStart = true
    },

    //加载更多
    loadMore() {
      this.loadShow = true
      let that = this
      setTimeout(function(){
        if (that.nowNum != that.allNum) {
          that.nowNum++
          Get('/goods?page='+that.nowNum+'&_per_page=10',that.$store.state.token).then(function(reg){
            that.prcList = that.prcList.concat(reg.data)
            that.allNum = reg.meta.pagination.total_pages
            that.nowNum = reg.meta.pagination.current_page
            that.loadShow = false
          })
        } else {
          that.noMore = true
          that.loadShow = false
        }
      },1000)
      
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" type="text/css">
$vw:750;
@function h($px) {
  @return $px/$vw*100vw
}

input,
textarea {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: middle;
}

.home {
  padding-bottom: h(110)
}


.topNav {
  border-bottom: #ddd solid 1px;
  padding: h(10) 0
}

.topNav ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  padding: h(10) 0
}

.topNav ul li {
  text-align: center;
  font-size: h(22);
  color: #8397a0
}

.topNav ul li em {
  width: h(56);
  height: h(56);
  display: block;
  margin: auto;
}

.topNav ul li em img {
  width: 100%;
}

.floor .bigPrc img {
  width: 100%;
}

.prcList ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: h(10) 0
}

.prcList ul li {
  position: relative;
  width: h(240);
  height: h(280)
}

.prcList ul li .prcBg {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0
}

.prcList ul li .prcBg:before {
  content: '';
  width: h(240);
  height: h(280);
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0
}

.prcList ul li .prcTitle {
  width: h(200);
  color: #9ec5d6;
  position: relative;
  z-index: 3;
  margin: auto;
  padding-top: h(66);
  text-align: center;
}

.prcList ul li .prcTitle .title {
  font-size: h(36);
  border-bottom: #9ec5d6 solid h(1);
  padding-bottom: h(10)
}

.prcList ul li .prcTitle .enTitle {
  font-size: h(12);
  padding-top: h(10)
}

.prcList ul li a {
  width: h(160);
  height: h(40);
  font-size: h(26);
  color: #ffdec3;
  border: #ffdec3 solid h(1);
  display: block;
  position: absolute;
  z-index: 4;
  text-align: center;
  border-radius: h(4);
  left: 50%;
  bottom: h(16);
  margin-left: h(-80);
}

.nList {
  background: #efefef;
  padding: h(10)
}

.nList .sTitle {
  text-align: center;
  font-size: 1.2rem;
  line-height: 2;
  color: #666;
  border-bottom: #ddd solid 1px;
}

.nList ul li {
  width: h(310);
  height: h(450);
  background: #fff;
  padding: h(10);
  display: inline-block;
  margin: h(16);
}

.nList ul li img {
  width: h(310);
  height: h(350)
}

.nList ul li .title {
  font-size: h(26);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 2.2
}

.nList ul li .price {
  font-size: h(26);
  color: #ea5350;
  line-height: 1
}

.nList ul li span {
  font-size: h(26);
  color: #ea5350;
  float: right;
  line-height: 1;
  position: relative;
  padding-right: h(20);
}

.nList ul li span:after {
  content: '';
  display: inline-block;
  width: h(12);
  height: h(26);
  background: url(/static/images/go.png) center no-repeat;
  background-size: 100% auto;
  position: absolute;
  margin-left: h(4)
}

.loading {
  text-align: center;
  font-size: h(28);
  line-height: 3;
  color: #666
}

.noThing {
  text-align: center;
  font-size: h(28);
  line-height: 3;
  color: #666
}

.clickLoad {
  text-align: center;
  font-size: h(28);
  line-height: 3;
  color: #666
}

.vux-indicator {
  left: 45%;
}



</style>
